<template>
  <div class="box">
    <header class="header">
      <van-nav-bar left-arrow @click-left="$router.go(-1)">
        <van-search disabled @click="gosearch" slot="title" placeholder="请输入搜索关键词" />
      </van-nav-bar>
    </header>
    <div class="content">
      <van-sticky>
        <van-dropdown-menu active-color="#ee0a24">
          <van-dropdown-item @change="change1" v-model="value1" :options="option1" />
          <van-dropdown-item @change="change2" v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </van-sticky>
      <Prolist :prolist="prolist" />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Search, DropdownMenu, DropdownItem, Sticky } from 'vant'
import { getCategoryBrandList } from '@/api'
import Prolist from '@/components/prolist'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Sticky)
export default {
  components: {
    Prolist
  },
  data () {
    return {
      prolist: [],
      oldlist: '',
      value1: 0,
      value2: 0,
      option1: [
        { text: '综合价格', value: 0 },
        { text: '价格最低', value: 1 },
        { text: '价格最高', value: 2 }
      ],
      option2: [
        { text: '销量评分', value: 0 },
        { text: '销量排序', value: 1 },
        { text: '评分排序', value: 2 }
      ]
    }
  },
  mounted () {
    const { type, brand } = this.$route.query
    console.log(type, brand)
    getCategoryBrandList({ type, brand }).then(res => {
      console.log(res)
      // 引入产品列表组件，直接传参即可
      this.prolist = res.data.data
      this.oldlist = res.data.data
    })
  },
  methods: {
    gosearch () {
      this.$router.push('/search')
    },
    change1 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return a.price - b.price
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.price - a.price
        })
      }
    },
    change2 (value) {
      console.log(value)
      if (value === 0) {
        this.prolist = JSON.parse(this.oldlist)
        return
      }
      if (value === 1) {
        this.prolist.sort((a, b) => {
          return b.sales - a.sales
        })
        return
      }
      if (value === 2) {
        this.prolist.sort((a, b) => {
          return b.rating - a.rating
        })
      }
    }
  }
}
</script>

<style lang="scss">
.van-search {
  padding: 5px 12px;
}
.van-nav-bar__tittle {
  max-width: 80%;
}
</style>
